<div id="page-content">
    <div class="col-sm-12 eq-box-sm">
        <div class="panel ">
            <div class="panel-heading">
                <div class="panel-control" style="padding:10px 15px;">
                    <button class="btn btn-default" data-target="#demo-panel-collapse-default" data-toggle="collapse"
                            aria-expanded="true">
                        <i class="demo-pli-arrow-down"></i>
                    </button>
                </div>
                <h3 class="panel-title">
                    查询搜索</h3>
            </div>
            <!--Panel body-->
            <div id="demo-panel-collapse-default" class="collapse in" aria-expanded="true">
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <input type="text" id="name" class="form-control" placeholder="请输入姓名" value="">
                            <button class="btn btn-mint" type="button" onclick="search2()">搜索</button>
                            <button class="btn btn-primary" type="button" onclick="reset2()">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="panel-body">
                <a id="add" class="btn btn-mint data-toolbar" onclick="doPjax('#(ctx)/admin/remark/getEditPage?view=edit')" href="javascript:void(0);"><i class="demo-pli-add"></i>添加留言</a>
                <a id="del" class="btn btn-danger data-toolbar" onclick="delSel()" href="javascript:void(0);"><i class="demo-pli-cross"></i> 批量删除</a>
                <table id="pageTable" class="demo-add-niftycheck" data-toolbar="#add,#del"
                       data-search="true"
                       data-show-refresh="true"
                       data-show-toggle="true"
                       data-show-columns="true"
                       data-sort-name="id"
                       data-page-list="[5, 10, 20]"
                       data-page-size="5"
                       data-pagination="true" data-show-pagination-switch="true" ></table>
            </div>
        </div>
    </div>
</div>
<script>

    var col = [{
        field: 'checked',
        checkbox: true,
        align: 'center'
    },
        {
            field: 'remark',
            title: '留言内容',
            align: 'center'
        },
        {
            field: 'name',
            title: '创建人姓名',
            align: 'center'
        },
        {
            field: 'create_time',
            title: '创建时间',
            align: 'center'
        },{
            field: 'control',
            title: '操作',
            align: 'left',
            width:'240',
            formatter:function(value,row,index){
                //通过formatter可以自定义列显示的内容
                //value：当前field的值，即id
                //row：当前行的数据
                var a = '';
                a = a + '<a class="label label-table label-success" onclick="doPjax(\''+ctx+'/admin/remark/getEditPage?id='+row.id+'&view=edit\')" href="javascript:void(0);" >编辑</a>&nbsp;';
                a = a + '<a class="label label-table label-danger" onclick="del(\''+row.id+'\')" href="javascript:void(0);" >删除</a>';
                return a;
            }
        }];
    var opt = {
        //请求方法
        method: 'get',
        //是否显示行间隔色
        striped: true,
        //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        cache: false,
        //data-toolbar: "#demo-delete-row",
        //是否显示分页（*）
        pagination: true,
        //是否启用排序
        sortable: false,
        //排序方式
        sortOrder: "asc",
        //初始化加载第一页，默认第一页
        //我设置了这一项，但是貌似没起作用，而且我这默认是0,- -
        //pageNumber:1,
        //每页的记录行数（*）
        pageSize: 10,
        //可供选择的每页的行数（*）
        pageList: [10, 25, 50, 100],
        //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
        url: ctx+"/admin/remark/listData",
        //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
        //queryParamsType:'',
        ////查询参数,每次调用是会带上这个参数，可自定义
        queryParams : function(params) {
            return {
                pageNumber: (params.offset/params.limit)+1,
                pageSize: params.limit,
                name:$("#name").val()
            };
        },
        //分页方式：client客户端分页，server服务端分页（*）
        sidePagination: "server",
        //是否显示搜索
        search: false,
        //Enable the strict search.
        strictSearch: true,
        //Indicate which field is an identity field.
        idField : "id",
        columns: col,
        pagination:true,paginationShowPageGo: true
    };

    //表格
    function initTable(){
        $('#pageTable').bootstrapTable(opt);
        $('#pageTable').bootstrapTable('hideColumn', 'id');
    }
    function refreshTable(){
        $("#pageTable").bootstrapTable('refresh', opt);
        $('#pageTable').bootstrapTable('hideColumn', 'id');
    }

    function search2() {
        refreshTable()
    }

    function delSel(){
        var data = [];
        $("#pageTable input[type='checkbox'][name!='btSelectAll']:checked").each(function(){
            data.push($(this).val());
        });
        if(data.length==0){
            pointLion.alertMsg("请选择要删除的数据!","danger",null,null);
            return;
        }
        del(data.join(","));
    }
    //ɾ��
    function del(ids){
        pointLion.confimMsg("您是否要删除所选信息 ?<br/> 点击确认进行删除 , 点击取消取消该操作",null,function(){
            var data = common_ajax.ajaxFunc("/admin/remark/delete",{"ids":ids}, "json", null);
            if(data.success){
                pointLion.alertMsg(data.message,"success",null,function(){
                    doPjax(ctx+'/admin/remark/getListPage');
                });
            }else{
                pointLion.alertMsg(data.message,"success",null,null);
            }
        });
    };

    function reset2() {
        $("#name").val("");
        refreshTable()
    }

    $(document).ready(function(){
        initTable();//初始化
    });
</script>